<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="/views/header.jsp"/>

<head>
    <!-- 其他meta标签 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 头像样式控制 */
        .avatar-lg {
            width: 120px;  /* 调整为合适大小 */
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin: 0 auto 15px;
            display: block;
        }
    </style>
</head>

<c:if test="${not empty param.updateSuccess}">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        个人信息更新成功！
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</c:if>
<div class="container mt-4">
    <c:if test="${not empty param.updateSuccess}">
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            个人信息更新成功！
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </c:if>

    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <div style="width: 120px; height: 120px; margin: 0 auto 15px;">
                        <img src="${pageContext.request.contextPath}/${not empty currentUser.avatar ? currentUser.avatar : 'images/default-avatar.png'}"
                             class="rounded-circle w-100 h-100" alt="用户头像"
                             style="object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                    </div>
                    <h4>${currentUser.nickname}</h4>
                    <p class="text-muted">ID: ${currentUser.userId}</p>

                    <form action="${pageContext.request.contextPath}/user/uploadAvatar" method="post" enctype="multipart/form-data" class="mb-3">
                        <div class="input-group">
                            <input type="file" class="form-control" name="avatar" accept="image/*" required>
                            <button class="btn btn-outline-primary" type="submit">更换头像</button>
                        </div>
                    </form>

                    <div class="d-flex justify-content-center mb-3">
                        <div class="text-center mx-3">
                            <h5>${friendCount}</h5>
                            <small class="text-muted">好友</small>
                        </div>
                        <div class="text-center mx-3">
                            <h5>${postCount}</h5>
                            <small class="text-muted">日志</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">个人信息</h5>
                    <button class="btn btn-sm btn-outline-primary" id="editProfileBtn">编辑资料</button>
                </div>
                <div class="card-body">
                    <form id="profileForm" action="${pageContext.request.contextPath}/user/update" method="post">
                    <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">用户ID</label>
                                <input type="text" class="form-control" value="${currentUser.userId}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label for="nickname" class="form-label">昵称</label>
                                <input type="text" class="form-control" id="nickname" name="nickname"
                                       value="${currentUser.nickname}" readonly>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">手机号</label>
                                <input type="text" class="form-control" value="${currentUser.phone}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">电子邮件</label>
                                <input type="text" class="form-control" value="${currentUser.email}" readonly>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="birthDate" class="form-label">出生日期</label>
                                <input type="date" class="form-control" id="birthDate" name="birthDate"
                                       value="${currentUser.birthDate}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">性别</label>
                                <div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="male" name="gender"
                                               value="male" ${currentUser.gender eq 'male' ? 'checked' : ''} disabled>
                                        <label class="form-check-label" for="male">男</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="female" name="gender"
                                               value="female" ${currentUser.gender eq 'female' ? 'checked' : ''} disabled>
                                        <label class="form-check-label" for="female">女</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="other" name="gender"
                                               value="other" ${currentUser.gender ne 'male' and currentUser.gender ne 'female' ? 'checked' : ''} disabled>
                                        <label class="form-check-label" for="other">其他</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="bio" class="form-label">个人简介</label>
                            <textarea class="form-control" id="bio" name="bio" rows="3"
                                      readonly>${currentUser.bio}</textarea>
                        </div>
                        <!-- 操作按钮 -->

                        <div class="d-flex justify-content-end d-none" id="formActions">
                            <button type="button" class="btn btn-outline-secondary me-2" id="cancelEditBtn">取消</button>
                            <button type="submit" class="btn btn-primary">保存更改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const editBtn = document.getElementById('editProfileBtn');
        const cancelBtn = document.getElementById('cancelEditBtn');
        const formActions = document.getElementById('formActions');
        const form = document.getElementById('profileForm');

        // 编辑按钮点击事件
        editBtn.addEventListener('click', function() {
            // 启用可编辑字段
            form.querySelectorAll('[readonly], [disabled]').forEach(field => {
                field.removeAttribute('readonly');
                if (field.disabled) field.removeAttribute('disabled');
            });

            // 显示操作按钮
            formActions.classList.remove('d-none');
            // 隐藏编辑按钮
            this.classList.add('d-none');
        });

        // 取消按钮点击事件
        cancelBtn.addEventListener('click', function() {
            // 禁用字段
            form.querySelectorAll('input:not([name="nickname"]), textarea, [type="radio"]').forEach(field => {
                if (!field.readonly) field.setAttribute('readonly', '');
                if (!field.disabled && field.type === 'radio') field.setAttribute('disabled', '');
            });

            // 隐藏操作按钮
            formActions.classList.add('d-none');
            // 显示编辑按钮
            editBtn.classList.remove('d-none');

            // 重置表单
            form.reset();
        });
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<jsp:include page="/views/footer.jsp"/>